import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Search, Settings } from "lucide-react";

export default function Home() {
  const [stockCode, setStockCode] = useState("");
  const [error, setError] = useState("");
  const navigate = useNavigate();

  // 股票代码格式验证
  const validateStockCode = (code: string): boolean => {
    // 沪深股票：6位数字
    const shszPattern = /^[0-9]{6}$/;
    // 港股：5位数字
    const hkPattern = /^[0-9]{5}$/;
    
    return shszPattern.test(code) || hkPattern.test(code);
  };

  const handleSearch = () => {
    if (!stockCode.trim()) {
      setError("请输入股票代码");
      return;
    }

    if (!validateStockCode(stockCode.trim())) {
      setError("请输入正确的股票代码格式（沪深：6位数字，港股：5位数字）");
      return;
    }

    setError("");
    // 跳转到K线图分析页面
    navigate(`/chart/${stockCode.trim()}`);
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      handleSearch();
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl shadow-xl p-8 w-full max-w-md">
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-gray-800 mb-2">股票分析工具</h1>
          <p className="text-gray-600">输入股票代码开始分析</p>
        </div>

        <div className="space-y-4">
          <div>
            <label htmlFor="stockCode" className="block text-sm font-medium text-gray-700 mb-2">
              股票代码
            </label>
            <div className="relative">
              <input
                id="stockCode"
                type="text"
                value={stockCode}
                onChange={(e) => {
                  setStockCode(e.target.value);
                  setError("");
                }}
                onKeyPress={handleKeyPress}
                placeholder="例如：000001 或 00700"
                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all"
                maxLength={6}
              />
            </div>
            {error && (
              <p className="mt-2 text-sm text-red-600">{error}</p>
            )}
          </div>

          <button
            onClick={handleSearch}
            className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition-colors flex items-center justify-center gap-2"
          >
            <Search size={20} />
            开始分析
          </button>
        </div>

        <div className="mt-8 text-center">
          <p className="text-sm text-gray-500 mb-2">支持市场：</p>
          <div className="flex justify-center gap-4 text-xs text-gray-600 mb-4">
            <span className="bg-gray-100 px-2 py-1 rounded">沪深股市</span>
            <span className="bg-gray-100 px-2 py-1 rounded">香港股市</span>
          </div>
          
          <button
            onClick={() => navigate('/settings')}
            className="flex items-center gap-2 text-gray-500 hover:text-gray-700 transition-colors mx-auto text-sm"
          >
            <Settings size={16} />
            系统设置
          </button>
        </div>
      </div>
    </div>
  );
}